<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
    <div class="popover-box" v-if="props.isShow">
      
      <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
        <div class="title">
        邀请有礼
      </div>
        <div class="popover-content-title">
          <div>每成功邀请一名首次注册APP/小程序新朋友</div>
        <div>即可获得一次游戏机会，增加前进步数</div>
        </div>
        <VanField center class="code-input" v-model="invite_code" placeholder="请输入好友邀请码">
          <template #button>
            <div class="btn" role="button" @click="submitUserInvite">提 交</div>
          </template>
        </VanField>
        <div class="invite-code">
          我的邀请码：{{ appStore.userInfo.invite_code }}
        </div>
        <div class="invite">
          <VanRow :gutter="10" align="center">
          <VanCol>
            <div class="invite_tip">已成功邀请 {{ appStore.userInfo.invite_num }} 人</div>
          </VanCol>
          <VanCol>
            <div class="btn" role="button">查 看</div>
          </VanCol>
        </VanRow>
        </div>
        <VanRow :gutter="30">
          <VanCol><div class="btn" role="button" @click="handleCancel">返 回</div></VanCol>
          <VanCol><div class="btn" role="button" @click="handleShare">邀 请</div></VanCol>
        </VanRow>
        <!-- <div class="footer">
        <div class="btn" role="button" @click="$emit('handleClose')">确认</div>
      </div> -->
      </div>
      
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
import { userCarType, userInvite } from '../api';
import {useStore} from '../store/useApp'
import useApp from '../hooks/useApp';
import { showFailToast } from 'vant';
const appStore = useStore()
const {appShare} = useApp()
const invite_code = ref('')
  const emit = defineEmits(['handleClose'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '恭喜您'
    },
    shareImg: {
      type: String
    },
    tips: {
      type: Boolean,
    }
  })
  function handleShare() {
    appShare()
  }
  function handleCancel() {
    invite_code.value = ''
    emit('handleClose')
  }
  function submitUserInvite() {
    userInvite({invite_code:invite_code.value}).then(({error_code,msg}) => {
      if (error_code !== 0) {
        return showFailToast(msg)
      }
    })
  }
  </script>
  <style lang="scss"  scoped>
  .popover-box {
    position: fixed;
    // z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ChangAnunitype-Bold";
    top: 0;
    flex-direction: column;
  
  }
  .popover-box .uni-img {
    position: relative;
  }
   .van-cell {
    padding: 0;
    color: #fff;
    background: transparent;
    border: solid 2px #fff;
    .van-field__control {
    text-align: center;
  }

  }

  
  .qrimg {
    width: 180px;
    height: 180px;
    margin: 20px 0;
  }
  .popover-content {
    width: 606px;
    min-height: 397px;
    padding: 60px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    /* justify-content: center; */
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    .title {
      margin-top: 0;
      font-size: 48px;
    }
    .popover-content-title {
      margin-bottom: 40px;
    }
    .invite {
      padding: 30px 0;
      font-size: 30px;
    }
    .invite-code {
      font-size: 30px;
      margin-top: 20px;
    }
  }
  
  .icon {
    display: flex;
    justify-content: center;
    padding: 10px 0 15px 0;
  }
  
  .icon > img {
    max-width: 50%;
  }
  
  .tips {
    color: #999;
    font-size: 20px;
    font-family: "ChangAnunitype-Regular";
  }
  
  .popover-bg {
    width: 100%;
    height: 100%;
  }
  
  .bell_bg {
    position: absolute;
    width: 119px;
    height: 118px;
    top: -60px;
  }
  
  .bell {
    position: absolute;
    width: 61px;
    height: 62px;
    top: -30px;
  
  }
  
  .popover-data {
    font-family: "ChangAnunitype-Regular";
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0160a5;
    letter-spacing: 2px;
    font-weight: 900;
    margin-top: 20px;
  }
  
   .btn {
    // position: absolute;
    right: 0;
    // bottom: -2.8vw;
    background: linear-gradient(180deg, #91d8ff, #4e81e9);
    // border-radius: 50px;
    width: 200px;
    height: 10.8vw;
    line-height: 12vw;
    font-size: 4.8vw;
    letter-spacing: 0.53333vw;
    color: #fff;
    font-family: "ChangAnunitype-Bold";
    background: url(/images/home/btn_bg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  </style>
  <style>
  .code-input {
    .van-field__control {
      text-align: center;
    }
    .van-field__control {
      color: #fff;
    }
    .van-field__control::placeholder {
    color: #fff;
  }
  }
</style>